<template>
  <div class='container'>
    <el-card>
      <!-- 头部栏组件 -->
      <CardHeader cardHeaderLeft="说明：目前支持学科和关键字条件筛选">
        <template #right>
          <el-button type="success" size="mini" icon="el-icon-edit" @click="
          $router.push('/questions/new')">新增试题</el-button>
        </template>
      </CardHeader>
      <!-- 搜索栏组件 -->
      <SearchQuestions
      ref="search"
      @update-data="loadList"
      />

      <el-alert
        :title="'数据一共 '+ tableData.counts + ' 条'"
        type="info"
        :closable="false"
        show-icon>
      </el-alert>

       <!-- table区域 S-->
      <el-table
        :data="tableData.items"
        style="width: 100%">
        <el-table-column
          prop="number"
          label="试题编号"
          >
        </el-table-column>
        <el-table-column
          prop="subject"
          label="学科"
          >
        </el-table-column>
        <el-table-column
          prop="catalog"
          label="目录">
        </el-table-column>
        <el-table-column
          prop="questionType"
          label="题型"
          >
          <template slot-scope="{row}">
           {{questionType(row.questionType)}}
          </template>
        </el-table-column>
        <el-table-column
          label="题干"
          width="250"
          >
          <template slot-scope="{row}">
            <div v-html="row.question"/>
          </template>
        </el-table-column>
        <el-table-column
          prop="addDate"
          label="录入时间"
          width="200"
          >
          <template slot-scope="{row}">
            {{row.addDate|parseTimeByString}}
          </template>
        </el-table-column>
        <el-table-column
          prop="difficulty"
          label="难度"
          >
          <template slot-scope="{row}">
            {{difficulty(row.difficulty)}}
          </template>
        </el-table-column>
        <el-table-column
          prop="creator"
          label="录入人"
          >
        </el-table-column>
        <el-table-column
          label="操作"
          width="200px">
          <template slot-scope="{row}">
            <el-button
            size="small"
            plain
            type="primary"
            icon="el-icon-view"
            circle
            @click="handleView(row)"
            ></el-button>
            <el-button
            size="small"
            plain
            type="success"
            icon="el-icon-edit"
            circle
            @click="$router.push({
              name:'questions-new',
              query:{id:row.id}
            })"
            ></el-button>
            <el-button
            size="small"
            plain
            type="danger"
            icon="el-icon-delete"
            circle
            @click="handleDelete(row.id)"
            ></el-button>
            <el-button
            size="small"
            plain
            type="warning"
            icon="el-icon-check"
            circle
            @click="handleCheck(row.id)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- table区域 E-->

      <!-- 分页器区域 S -->
      <Pagination
      :counts="counts"
      @changePageSize="changePageSize"
      @changeCurrentPage="changeCurrentPage"
      ></Pagination>
      <!-- 分页器区域 E -->

      <!-- 预览弹窗 -->
      <Descriptions
      :isShowDesc="isShowDesc"
      :DescInfo="DescInfo"
      @onClose="isShowDesc=$event"/>
    </el-card>
  </div>
</template>

<script>
import SearchQuestions from '../components/questions-search.vue'
import { list, remove, choiceAdd, detail } from '@/api/hmmm/questions.js'
import { questionType, difficulty } from '@/api/hmmm/constants.js'

export default {
  data () {
    return {
      tableData: {},
      counts: 0,
      isShowDesc: false,
      DescInfo: {}
    }
  },

  components: {
    SearchQuestions
  },

  computed: {
    questionType (type) {
      return type => questionType.find(item => item.value === type - 0).label
    },
    difficulty (diff) {
      return diff => difficulty.find(item => item.value === diff - 0).label
    }
  },

  created () {
    this.loadList()
  },

  methods: {
    // 请求table数据方法
    async loadList (e) {
      const form = e || { page: 1, pagesize: 5 }
      const { data } = await list(form)
      this.tableData = data
      this.counts = data.counts
    },
    // 分页器的方法
    changePageSize (val) {
      // console.log(`每页 ${val} 条`)
      this.$refs.search.changePagesize(val)
    },
    changeCurrentPage (val) {
      // console.log(`当前页: ${val}`)
      this.$refs.search.changePage(val)
    },

    // 点击删除
    handleDelete (id) {
      this.$confirm('此操作将永久删除该题目, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await remove({ id: id })
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        this.loadList()
      }).catch(() => {})
    },

    // 点击check对勾
    handleCheck (id) {
      this.$confirm('此操作将该题目加入精选, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      }).then(async () => {
        await choiceAdd({ id: id, choiceState: 1 })
        this.$message({
          type: 'success',
          message: '加入精选成功!'
        })
        this.loadList()
      }).catch(() => {})
    },

    // 点击预览
    async handleView (row) {
      const res = await detail(row)
      this.isShowDesc = true
      this.DescInfo = res.data
      console.log(this.DescInfo)
    }
  }
}
</script>

<style scoped lang='less'>
.el-table{
  margin-top: 10px;
}
.el-pagination{
  margin: 15px 0;
}
</style>
